<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		SVG+CSS3动画
		<title></title>
	<svg width="720" height="480" version="1.1" xmlns="http://www.inkscape.org/" xmlns:xlink="http://www.inkscape.org/">
<rect x="50" y="50" width="100" height="50">
<animate attributeType="XML" attributeName="x" 
from="50" to="300" dur="3s" begin="3s"
restart="always" repeatCount="3">
</animate>
</rect>

<circle cx="100" cy="200" r="30" style="fill:none;stroke-width:3;stroke:black">
<animate attributeType="XML" attributeName="r" 
from="0" to="30" dur="5s"
restart="always" repeatCount="3">
</animate>
</circle>

<circle cx="100" cy="300" r="30" style="fill:none;stroke-width:3;stroke:blue">
<animate attributeType="CSS" attributeName="fill"
from="#000000" to="#F40" dur="3s"
restart="always">
</animate>
</circle>
</svg>
</body>
</html>
	</head>
	
</html>
